<template>
  <div style="padding-bottom: 42px;">
    <div class="search-block" v-if="showsearch">
      <searchtab @searchopen="opensearch" @checkstab="goindex" @linksearch="searchlink" :tablist="tablistprop"></searchtab>
    </div>
    <div class="search-block-new" v-if="showsearchlist">
      <searchlist @cansearch="searchcan" :searchprop="searchtext"></searchlist>
    </div>
    <div class="detail-top-tab pc-bk" >
      <navblock></navblock>
    </div>
   <!--  <div class="member-list-title">
      {{source_name}}
    </div> -->
    <!-- <div class="second-info pc-bk">
      <div class="second-tablist">
        <div class="tablist-ele" v-for="(secondtab,index) in secondlist"  @click="moreBtn" :data-id="secondtab.id">
          <span v-bind:class="{'active':secondtab.is_selected === 1}">{{secondtab.name}}</span> <i v-if="index < secondlist.length - 1">·</i>
        </div>
      </div>
      <div class="second-info-text" v-if="note!=='' ">
        {{note}}
      </div>
    </div> -->
    <!--<div class="container-list" v-if="data.total>0">-->
    <div class="container-list">
      <div class="top-content-block">
        <div class="left-nav pc-bk" ref="leftnav" v-bind:class="{'scroll':scrolldetail === 1, 'fbottom':fixedbottom === 1}" ><!--左侧导航-->
          <div class="detail-search">
            <input type="text"  v-model="searchtext" placeholder="全站搜索 Search" @keyup.enter="searchBtn1">
            <img src="../../img/mobile/search_new.png"  @click="searchBtn1">
          </div>
          <div class="side-header hy detail">
            <span class="sidle-text">{{nav_title}}
            <!-- <i>BRAINPOWER</i> -->
            </span>
            <span class="sidle-icon"><img src="../../img/mobile/side-header-hy.jpg"></span>
          </div>
          <div class="meeting-list  detail-sidle">
            <ul>
              <li v-for="(meetlist, index) in tablist" v-if="meetlist.item_id !== 0" v-bind:class="{'open': meetlist.is_selected === 1}" :data-id="tablist.length">
                <div class="detail-sidle-main" @click="moreBtn" :data-itid="meetlist.item_id" :data-id="meetlist.id" :data-type="meetlist.content_type">
                  <span class="focus-icon">
                  </span>
                  <span class="focus-title-link">
                    {{meetlist.name}}
                  </span>
                </div>
                <div class="open-sidle" v-if="meetlist.children.length > 0">
                  <div class="open-sidle-list" v-if="listchild.item_id !== 0"  v-bind:class="{'active' : listchild.is_selected === 1}" @click="tomoreList" :data-itid="listchild.item_id" :data-tcid="listchild.third_level_cid" :data-id="listchild.id" :data-cid="listchild.parent_cid" :data-type="listchild.content_type" v-for="(listchild, childindex) in meetlist.children">
                    {{listchild.name}}
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="listpage-content" v-if="data.total>0" v-bind:class="{'scroll':scrolldetail === 1}" >
          <div class="side-header hy-light pc-bk">
            <span class="sidle-text">{{second_level_cname}}</span>
            <span class="sidle-icon"><img src="../../img/mobile/side-header-light.jpg"></span>
          </div>
          <div class="content-list-block">
            <div class="content-list-body list iffmember">
              <div class="agenda-list pc-bk"  @click="linkDetail" :data-id="contlist.id" v-for="contlist in data.list" :data-cid="contlist.second_level_cid">
                <div class="agenda-img" v-lazy:background-image="{src: contlist.cover_path, error: imgUrl, loading: imgUrl}"></div>
                <div class="agenda-title hy iffmemberlist">
                  {{contlist.title}}
                </div>
                <div class="agenda-article-info iffmemberlist">
                  {{contlist.member_title}}
                </div>
                <div class="agenda-article-info iffmemberlist">
                  {{contlist.member_position1}}
                </div>
                <div class="agenda-article-info iffmemberlist">
                  {{contlist.member_position2}}
                </div>
                <!-- <div class="agenda-article-info iffmemberlist">
                  {{contlist.note}}
                </div> -->
                <div class="article-share-icon">
                  <img src="../../img/mobile/at-share-icon.png">
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="see-more-btn" v-if="showmore">
            <span @click="moreList">查看更多</span>
          </div> -->
          <div class="list-page pc-bk">
            <el-pagination
                @current-change="handleCurrentChange"
                background
                layout="prev, pager, next"
                :total="total"
                :current-page="page"
                :page-size="limtsize"
            >
            </el-pagination>
          </div>
        </div>
        <div class="no-content" style="height: 600px;" v-bind:class="{'scroll':scrolldetail === 1}"  v-else>
          <div class="nosearch" v-if="!loading">
            <img src="../../img/mobile/emptycontent.jpeg" alt="">
          </div>
          <!-- 空空如也！ -->
        </div>
      </div>
    </div>
    <footernav></footernav>
  </div>
</template>
<script>
import api from '../../utils/api'
import apiConfig from '../../utils/apiconfig.js'
import helper from '../../utils/helper'
import { Indicator, Spinner } from 'mint-ui'
import navblock from './components/nav'
import searchtab from './components/searchtab'
import searchlist from './components/search'
import footernav from './components/footernav'
export default {
  data () {
    return {
      scrolldetail: 0,
      fixedbottom: 0,
      searchtext: '',
      page: 1,
      total: '',
      limtsize: 9,
      tablist: [],
      showsearchlist: false,
      data: {
        list: []
      },
      pages: 1,
      loading: false,
      second_level_cname: '',
      showmore: true,
      imgUrl: '',
      secondlist: [],
      first_level_cname: '',
      source_name: '',
      showsearch: '',
      id: ''
    }
  },
  components: {
    Spinner,
    navblock,
    searchtab,
    searchlist,
    footernav
  },
  beforeCreate(){
    var metaEl = document.getElementsByTagName("meta")
    metaEl[3]['content'] = "";
  },
  created () {
    this.id = this.$route.query.id
    this.cid = this.$route.query.cid
    var page = parseInt(this.$route.query.page)
    if (page) {
      this.page = page
    }
    this.getDatalist(this.id, this.cid, this.page)
    var imgUrl = require('../../img/mobile/blank.jpg')
    this.imgUrl = imgUrl
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop >= 100) {
        this.scrolldetail = 1
      } else {
        this.scrolldetail = 0
      }
      var leftnav = this.$refs.leftnav.clientHeight
      var scrollbottom = document.documentElement.scrollHeight - scrollTop - leftnav
      console.log(scrollbottom)
      if (scrollbottom <= 270) {
        this.fixedbottom = 1
      } else {
        this.fixedbottom = 0
      }
    },
    searchBtn1 () {
      this.showsearchlist = true
    },
    opensearch (val) {
      console.log('test:' + val)
      this.showsearch = val
    },
    searchlink (val) {
      console.log('testsss:' + val)
      this.showsearchlist = val
    },
    searchcan (val) {
      this.showsearchlist = val
    },
    cpryrightBtn () {
      this.$router.push('/home/copyright')
    },
    contactBtn () {
      this.$router.push('/home/contactus')
    },
    linkDetail (e) {
      console.log(e.currentTarget.dataset.id)
      // let routeData = this.$router.resolve({ path: '/home/detail', query: { id: e.currentTarget.dataset.id } })
      // window.open(routeData.href, '_blank')
      this.$router.push('/home/detail?id=' + e.currentTarget.dataset.id + '&cid=' + e.currentTarget.dataset.cid + '&listid=' + this.id + '&type=iff')
    },
    handleCurrentChange (val) {
      this.getDatalist(this.id, this.cid, val)
      this.$router.push('/home/ifflist?id=' + this.id + '&cid=' + this.cid + '&page=' + val)
    },
    getDatalist (id, cid, page) {
      var that = this
      this.page = page
      var param = {
        cid: cid,
        sid: id,
        page: page
      }
      console.log(param)
      Indicator.open('加载中...')
      this.params = param
      api.GET(helper.getClientApiUrl(apiConfig.web.memlist), this.params, res => {
        this.source_name = res.source_name
        this.nav_title = res.nav_title
        if (res.list.length > 0) {
          switch (this.tabid) {
            case 'TOP1': this.second_level_cname = '精选'
              break
            case 'TOP2': this.second_level_cname = '热点'
              break
            default: this.second_level_cname = res.source_name
              document.title = res.source_name + '-国际金融论坛'
              break
          }
        }
        console.log(res.list.length)
        if (res.list.length < 10) {
          this.showmore = false
        }
        that.data.list = res.list
        that.tablist = res.nav
        // that.tablist.forEach((item, index) => {
        //   if (item.content_type === 'news_detail' && item.is_selected === 1) {
        //     this.$router.push('/home/detail?id=' + item.id)
        //   }
        // })
        var total = res.total
        that.total = total
        if (total !== 0) {
          that.first_level_cid = that.data.list[0].first_level_cid
          console.log('1')
        } else {
          console.log('2')
        }
        that.data.total = res.total
        Indicator.close()
        that.loading = false
      }, res => {
        console.log(res)
        Indicator.close()
        this.loading = false
      })
    },
    backClick () {
      this.$router.go(-1)
    },
    moreList () {
      var thispage = this.page + 1
      this.page = thispage
      this.loading = true
      this.getDatalist(this.id, this.cid, thispage)
    },
    moreBtn (e) {
      console.log(e.currentTarget.dataset.type)
      let conttype = e.currentTarget.dataset.type
      if (conttype === 'AUTHOR') {
        this.$router.push('/home/authorlist?id=' + e.currentTarget.dataset.id)
      } else if (conttype === 'news_detail' || conttype === 'source_detail') {
        this.$router.push('/home/detail?id=' + e.currentTarget.dataset.itid)
      } else {
        this.getDatalist(e.currentTarget.dataset.id, 1)
        this.$router.push('/home/list?id=' + e.currentTarget.dataset.id)
      }
    },
    tomoreList (e) {
      let conttype = e.currentTarget.dataset.type
      let contid = e.currentTarget.dataset.id
      let contcid = e.currentTarget.dataset.cid
      if (conttype === 'source') {
        this.$router.push('/home/ifflist?id=' + contid + '&cid=' + contcid)
        this.getDatalist(contid, contcid, 1)
        this.id = contid
        this.cid = contcid
      } else if (conttype === 'news_detail' || conttype === 'source_detail') {
        this.$router.push('/home/detail?id=' + e.currentTarget.dataset.itid + '&tcid=' + e.currentTarget.dataset.tcid)
      } else if (conttype === 'news') {
        this.$router.push('/home/list?id=' + contid)
        this.tabid = contid
      }
    }
  }
}
</script>
<style>

  .tab-title.tablist-title{
    font-weight: bold;
  }
  .learn-all img{
    width: 7px;
    vertical-align: middle;
    margin-left: 5px;
  }
  .top-big-img img{
    width:100%;
  }
  .footer-content{
    background: #222126;
    color: #ffffff;
    margin-top: 30px;
  }
  .footer-tab li.noline{
    border-right:none;
  }
  .see-more-btn{
    text-align: center;
    margin-bottom: 20px;
  }
  .see-more-btn span{
    height: 30px;
    line-height: 30px;
    display: inline-block;
    padding: 0 25px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    color: #9b9b9b;
    border:1px solid #9b9b9b;
    margin: 20px 0;
  }
  .second-tablist{
    margin-bottom: 20px;
    font-size: 15px;
    color: #4e6e6d;
    font-weight: bold;
    padding:0 2px;
  }
  .second-info-text{
    font-size: 17px;
    line-height: 1.6;
    color: #353535;
    padding-bottom: 20px;
    border-bottom: 1px solid #d9d9d9;
  }
</style>
